<template>
	<div class="index">
      	<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      		<img width="147px" height="35px" src="../../static/img/logo.png">
		  	<el-menu-item :index="nav.index" v-for="nav in navbar"><router-link v-bind:style="routerlinkObj" :to="nav.path">{{nav.menuName}}</router-link></el-menu-item>
		  	<el-dropdown v-bind:class="logoutClass">
			  	<el-button type="primary" v-model="username">
			    	{{username}}<i class="el-icon-caret-bottom el-icon--right"></i>
			  	</el-button>
			  	<el-dropdown-menu slot="dropdown">
				    <el-dropdown-item v-for="dropmenu in dropdownData"><a @click="switchOption(dropmenu.type)" v-bind:style="routerlinkObj">{{dropmenu.name}}</a></el-dropdown-item>
			  	</el-dropdown-menu>
			</el-dropdown>
		</el-menu>
      	<router-view></router-view>
	</div>
</template>

<script>

export default{
	name:'index',
	data(){
		return{
			logoutBtn:'退出',
			activeIndex:'1',
			username:this.$store.state.username,
			logoutClass:'logout',
			navbar:[{
				index:'1',
				menuName:'新闻管理',
				path:'/index/news'
			},{
				index:'2',
				menuName:'订单管理',
				path:'/index/#'
			},{
				index:'3',
				menuName:'菜单管理',
				path:'/index/#'
			},{
				index:'4',
				menuName:'富文本编辑器demo',
				path:'/index/upload'
			}],
			dropdownData:[{
				name:'我的主页',
				type:'myMainPage'
			},{
				name:'设置',
				type:'setting'
			},{
				name:'退出',
				type:'logout'
			}],
			routerlinkObj:{
				display:'block',
				paddingTop:'3px',
				paddingBottom:'3px',
				textDecoration:'none'
			}
		}
	},
	methods:{
		// logout: function(){
		// 	this.$router.push({path:'/'});
		// },
		handleSelect:function(key,keypath){
			
		},
		switchOption(type){
			switch(type){
				case 'myMainPage':
					console.log("you have press myMainPage");
					break;
				case 'setting':
					console.log("you have press myMainPage");
					break;
				case 'logout':
					console.log("you have press myMainPage");
					this.$router.push({path:'/'});
					break;
			}
		},
		updated(){
			alert(this.username);
			// this.username = this.$store.state.username;
		}
	}
}
</script>

<style scoped>
  	img{
  		float: left;
  		margin-left: 1%;
  		margin-top: 12px;
  	}

  	el-button{
  		float: right;
  	}

  	.logout{
  		margin-top: 12px;
  		margin-right: 10px;
  		float: right;
  	}
</style>